<template>
	<Row class="c-jHeader flex">
		<div class="formwp flex-middle">
			<!-- <Input v-model="newPageName" style="width:280px">
      <span slot="prepend">{{ $t(`compDesign.jProperty.newPage`) }}</span>
      <Button size="small" slot="append"
        @click="$emit('newPage', newPageName)">{{ $t(`compDesign.jProperty.create`) }}</Button>
      </Input> -->
			<Button size="small" slot="append" @click="onCreate">{{ $t(`compDesign.jProperty.create`) }}</Button>
			<Divider :type="'vertical'"></Divider>
			<template v-if="currentModuleId">
				<Button size="small" slot="append" @click="onCopy">{{ $t(`compDesign.jProperty.copy`) }}</Button>
				<Divider :type="'vertical'"></Divider>
			</template>
			<span style="margin-right: 6px">{{ $t(`compDesign.jProperty.selectPage`) }}:</span>
			<!-- <TreeSelect v-model="curSelectId" :data="modulesTree" v-width="300" :select-node="false" @on-change="treeChange" /> -->
			<Cascader :data="modulesTree" v-model="curSelectId" @on-change="treeChange"
				:clearable="false" transfer style="width: 300px" transfer-class-name="bigSelect"></Cascader>
			<!-- <el-tree :data="modulesTree" v-model="curSelectId" @on-change="treeChange"
        :render-after-expand="false" class="selectTransfer" style="width:300px"/> -->
			<Divider :type="'vertical'"></Divider>
			<template v-if="currentModuleId">
				<Button type="primary" size="small" @click="$emit('openConfig')">{{ $t(`compDesign.jProperty.configProperty`) }}</Button>
				<Divider :type="'vertical'"></Divider>
				<!-- <Button type="primary" size="small" @click="configJSON">{{ $t(`compDesign.jProperty.configJSON`) }}</Button>
				<Divider :type="'vertical'"></Divider> -->
				<Button type="success" size="small" @click="$emit('saveConfig')">{{ $t(`compDesign.jProperty.saveConfig`) }}</Button>
				<Divider :type="'vertical'"></Divider>
				<Button size="small" type="warning" @click="$emit('refreshPage')">{{ $t(`compDesign.jProperty.refresh`) }}</Button>
			</template>
		</div>
		<!-- <Poptip v-if="currentModuleId" style="margin-left: 40px" confirm
			:title="$t(`global.confirmDelete`)" @on-ok="$emit('deletePage')">
			<Button size="small" type="error">{{ $t(`compDesign.jProperty.deleteCurrent`) }}</Button>
		</Poptip> -->
		<!-- 弹窗 -->
		<addModal :drawer="drawer" :initData="initData" 
			@submit=" item => { $emit('newPage', item, this.isCopy) } " />
		<Modal
			title="编辑JSON"
			v-model="jsonDrawer.show"
			:mask-closable="false"
			footer-hide
			class-name="compDesign-header-editerJson"
			:width="80"
			:styles="{ top: '50px', maxWidth: '1200px' }">
			<div v-if="compGroup && compGroup.currentItem">
				<vue-json-editor
				ref="_jsonEditor"
				:style="{ height: 'calc(100vh - 260px)' }"
				v-model="compGroup.currentItem.property"
				:showBtns="true"
				lang="zh"
				mode="code"
				@json-change="onJsonChange"
				@json-save="updateProperty"
				@has-error="onError" />
			</div>
			<div class="ivu-modal-footer"><Button @click="jsonDrawer.show = false">取消</Button></div>
		</Modal>
	</Row>
</template>

<script>
import addModal from '../../parts/addModal.vue'
import { mapActions, mapState } from 'vuex'
import vueJsonEditor from 'vue-json-editor'

export default {
	name: 'jHeader',
	components: { addModal, vueJsonEditor },
	methods: {
		treeChange(item) {
			let id = item

			if (Array.isArray(item) && item[1]) {
				id = item[1]
          		localStorage.setItem('components_selId', JSON.stringify(item))
			} else {
          		localStorage.setItem('components_selId', item)
			}
			this.$emit('getPage', id)
		},
		onCreate() {
			this.isCopy = false
			this.drawer.show = true
		},
		onCopy() {
			;(this.initData = {
				type: this.currentModule.type,
				name: this.currentModule.name + '-copy',
			}),
				(this.isCopy = true)
			this.drawer.show = true
		},
		configJSON() {
			this.jsonDrawer.show = true
		},
		onError() {},
		onJsonChange() {},
		updateProperty() {
			this.compGroup.setClassProperty()
		},
	},
	mounted() {
		let hisSelectId = localStorage.getItem('components_selId')
		hisSelectId && (this.curSelectId = JSON.parse(hisSelectId))
	},
	data() {
		return {
			newPageName: '',
			isCopy: false,
			curSelectId: null,
			initData: {},
			jsonDrawer: {
				show: false,
			},
			drawer: {
				show: false,
			},
      testData: [
        {p: [1,23]}
      ],
		}
	},
	watch: {
	},
	computed: {
		...mapState('compDesign/config', [
      		'compGroup',//控件清单
			'modules', //所有组件配置
			'modulesTree', //所有组件配置, tree结构
			'currentModule', //当前组件配置
			'currentModuleId', //当前组件id
		]),
	},
	props: {
	},
}
</script>

<style lang="less" scoped>
.c-jHeader {
	display: flex;
	justify-content: flex-start;
	align-items: center;
	flex-wrap: wrap;
	width: 100%;
	padding: 0 8px;
	.formwp {
		margin: 10px 0;
	}
}
</style>

<style lang="less">
.c-jHeader .selectTransfer {
	.ivu-tree-arrow {
		width: 30px;
		height: 20px;
	}
	.ivu-select-dropdown {
		max-height: calc(~'100vh - 180px');
	}
}
.compDesign-header-editerJson {
	.ivu-modal-footer {
		margin-right: 60px;
	}
	.jsoneditor-btns {
		margin-top: 14px;
		text-align: right;
		button {
			width: 60px;
			background-color: var(--primary-color);
			border-color: var(--primary-color);
		}
	}
}
</style>
